<template>
  <div class="v-tournover">
    <h1>营业额报表</h1>

    <div class="v-tournover-wrap mt25">
      <Row :gutter="40">
        <!-- 上月营业额 -->
        <Col span="6">
          <Card class="v-tournover-s-cell" bordered="false" dis-hover shadow>
            <p class="v-title">
              <span>{{ new Date().getMonth() }}月营业额</span>
              <Tooltip placement="left" class="fr" transfer>
                <ztIcon type="info-circle-o"></ztIcon>
                <div slot="content">
                  <p style="padding: 6px; line-height: 22px; font-size: 14px;">当流程未全部审批结束时，将显示「暂估」标志。所有相关统计数据都将存在一定偏差。</p>
                </div>
              </Tooltip>
            </p>
            <p class="v-price mt5">¥ {{ numberComma(parseInt(preMonthSummary.Amount)) }}<span class="v-float" v-if="String(preMonthSummary.Amount).indexOf('.') !== -1">.{{String(preMonthSummary.Amount).split('.')[1]}}</span><span>万</span>
            </p>
            <ul class="v-ratio mt15">
              <li>
                <span class="v-gray">月同比</span>
                <template v-if="preMonthSummary.MonthComparison !== -1">
                  <ztIcon v-if="preMonthSummary.MonthComparison > 0" size="12" color="#f5222d" type="caret-up" />
                  <ztIcon v-else size="12" color="#52c41a" type="caret-down" />
                  {{ Math.abs(preMonthSummary.MonthComparison) }}%
                </template>
                <template v-else>--</template>
              </li>
              <li class="fr">
                <span class="v-gray">月环比</span>
                <template v-if="preMonthSummary.MonthlyRingRatio !== -1">
                  <ztIcon v-if="preMonthSummary.MonthlyRingRatio > 0" size="12" color="#f5222d" type="caret-up" />
                  <ztIcon v-else size="12" color="#52c41a" type="caret-down" />
                   {{ Math.abs(preMonthSummary.MonthlyRingRatio) }}%
                </template>
                <template v-else>--</template>
              </li>
            </ul>
            <p class="v-sum">
              <span class="pt5 mr20 mt5 v-gray">日均营业额</span>
              <span class="mt5">¥{{ numberComma(preMonthSummary.DailyAverage) }}</span><span class="v-gray">万</span>
              <span v-if="preMonthSummary.Estimate" class="v-tag fr">暂估</span>
            </p>
          </Card>
        </Col>

        <!-- 本月计划营业额 -->
        <Col span="6">
          <Card class="v-tournover-s-cell" bordered="false" dis-hover shadow>
            <p class="v-title">
              <span>{{ new Date().getMonth() + 1 }}月计划营业额</span>
              <Tooltip placement="left" class="fr" transfer>
                <ztIcon type="info-circle-o"></ztIcon>
                <div slot="content">
                  <p style="padding: 6px; line-height: 22px; font-size: 14px;">当流程未全部审批结束时，将显示「暂估」标志。所有相关统计数据都将存在一定偏差。</p>
                </div>
              </Tooltip>
            </p>
            <!-- <p class="v-price mt5">¥{{ numberComma(currentMonthPlan.Amount) }}<span>万</span></p> -->
            <p class="v-price mt5">¥ {{ numberComma(parseInt(currentMonthPlan.Amount)) }}<span class="v-float" v-if="String(currentMonthPlan.Amount).indexOf('.') !== -1">.{{String(currentMonthPlan.Amount).split('.')[1]}}</span><span>万</span></p>
            <div class="v-ratio" style="height:56px;">
              <div id="turnoverPlan" style="width: 100%; height:40px;"></div>
            </div>
            <p class="v-sum">
              <span class="pt5 mr20 mt5 v-gray">占全年总目标</span>
              <span class="mt5" v-if="currentMonthPlan.Ratio !== -1">{{ Math.abs(currentMonthPlan.Ratio) }}%</span>
              <span v-else>--</span>
              <span v-if="currentMonthPlan.Estimate" class="v-tag fr">暂估</span>
            </p>
          </Card>
        </Col>
        
        <!-- 全年累计营业额 -->
        <Col span="6">
          <Card class="v-tournover-s-cell" bordered="false" dis-hover shadow>
            <p class="v-title">
              <span>全年累计营业额</span>
              <Tooltip placement="left" class="fr" transfer>
                <ztIcon type="info-circle-o"></ztIcon>
                <div slot="content">
                  <div style="padding: 6px 0; line-height: 22px; font-size: 14px;">
                    <p class="fl" style="width: 78px; line-height: 46px;">人均产值 = </p>
                    <div class="fl ta-c">
                      <p>当前累计营业额</p>
                      <p style="border-top: 1px solid #fff;">（年初员工数 + 当前员工数）/ 2</p>
                    </div>
                  </div>
                </div>
              </Tooltip>
            </p>
            <!-- <p class="v-price mt5">¥{{ numberComma(annualSummary.Amount) }}<span>万</span></p> -->
            <p class="v-price mt5">¥ {{ numberComma(parseInt(annualSummary.Amount)) }}<span class="v-float" v-if="String(annualSummary.Amount).indexOf('.') !== -1">.{{String(annualSummary.Amount).split('.')[1]}}</span><span>万</span></p>
            <ul class="v-ratio mt15">
              <li>
                <span class="v-gray">年环比</span>
                <template v-if="annualSummary.YearRingRatio !== -1">
                  <ztIcon v-if="annualSummary.YearRingRatio > 0" size="12" color="#f5222d" type="caret-up" />
                  <ztIcon v-else size="12" color="#52c41a" type="caret-down" />
                   {{ Math.abs(annualSummary.YearRingRatio) }}%
                </template>
                <template v-else>
                  --
                </template>
                
              </li>
            </ul>
            <p class="v-sum">
              <span class="pt5 mr20 mt5 v-gray">人均产值</span>
              <span class="mt5" v-if="annualSummary.PerCapita === -1">--</span>
              <span class="mt5" v-else>¥{{ numberComma(annualSummary.PerCapita) }}</span><span class="v-gray">万</span>
              <!-- <span v-if="annualSummary.Estimate" class="v-tag fr">暂估</span> -->
            </p>
          </Card>
        </Col>

        <!-- 全年营业额指标完成率 -->
        <Col span="6">
          <Card class="v-tournover-s-cell" bordered="false" dis-hover shadow>
            <p class="v-title">
              <span>全年营业额指标完成率</span>
              <Tooltip placement="left" class="fr" transfer>
                <ztIcon type="info-circle-o"></ztIcon>
                <div slot="content">
                  <p style="padding: 6px; line-height: 22px; font-size: 14px;">进度条为全年总目标；绿色部分为当前已完成；绿色刻度为当月目标计划值。</p>
                </div>
              </Tooltip>
            </p>
            <p class="v-price mt5" v-if="annualTargetCompleted.CompletedRatio !== -1">{{ annualTargetCompleted.CompletedRatio }}%</p>
            <p class="v-price mt5" v-else>--</p>
            <div class="v-ratio mt15">
              <div class="v-progress">
                <p class="v-plan" :style="{ width: 253 * (annualTargetCompleted.PlanAmount / annualTargetCompleted.TargetAmount) + 'px' }"></p>
                <p class="v-all" style="width: 253px;"></p>
                <p class="v-actual" :style="{ width: 253 * (annualTargetCompleted.CompletedAmount / annualTargetCompleted.TargetAmount) + 'px' }"></p>
              </div>
            </div>
            <p class="v-sum">
              <span class="pt5 mr20 mt5 v-gray">目标累计差异</span>
              <span class="mt5">¥{{ numberComma(annualTargetCompleted.DiffAmount) }}</span><span class="v-gray">万</span>
              <!-- <span v-if="annualTargetCompleted.Estimate" class="v-tag fr">暂估</span> -->
            </p>
          </Card>
        </Col>
      </Row>
    </div>

    <!-- 完成营业额 营业额趋势 -->
    <div class="v-turnover-3-1 ivu-card-shadow mt25">
      <Row :gutter="60" class="v-turnover-3-1-wrap">
        <Col span="18" class="v-relative">
          <ul class="v-year-tab">
            <template v-if="tabName === 'turnoverOver'">
              <li @click="GetCompletedBV(0)" :class="{'v-cur': yearCurIndex === 0}">今年</li>
              <li @click="GetCompletedBV(1)" :class="{'v-cur': yearCurIndex === 1}">去年</li>
              <!-- <li @click="GetCompletedBV(2)" :class="{'v-cur': yearCurIndex === 2}">近十二个月</li> -->
              <li>
                <DatePicker placeholder="更多" size="small" type="year" style="width: 68px;"
                  v-model="completedBVYear" 
                  :options="dateOptionsCom"  
                  @on-change="GetCompletedBV(2, $event)">
                </DatePicker> 
              </li>
            </template>
            <template v-else>
              <li @click="GetBVTrend(0)" :class="{'v-cur': yearCurIndex === 0}">今年</li>
              <li @click="GetBVTrend(1)" :class="{'v-cur': yearCurIndex === 1}">明年</li>
              <li>
                <DatePicker placeholder="更多" size="small" type="year" style="width: 68px;"
                  v-model="BVTrendYear" 
                  :options="dateOptionsTrend"  
                  @on-change="GetBVTrend(2, $event)">
                </DatePicker>
              </li>
            </template>
          </ul>
          <Tabs value="turnoverTrend" @on-click="OnclickTab">
            <TabPane label="营业额趋势" name="turnoverTrend" class="v-trend">
              <ul class="mt20">
                <li>
                  <span class="v-label opacity65">全年总目标</span> 
                  <span class="fs26 opacity-lighter">{{ numberComma(parseInt(bVTrend.AnnualTarget)) }}</span>
                  <span class="v-float" v-if="String(bVTrend.AnnualTarget).indexOf('.') !== -1">.{{String(bVTrend.AnnualTarget).split('.')[1]}}</span>
                  <span class="opacity65">万</span>
                </li>
                <li>
                  <span class="v-label opacity65">在手营业额</span> 
                  <span class="fs26 opacity-lighter">{{ numberComma(parseInt(bVTrend.CompletedAmount)) }}</span> 
                  <span class="v-float" v-if="String(bVTrend.CompletedAmount).indexOf('.') !== -1">.{{String(bVTrend.CompletedAmount).split('.')[1]}}</span>
                  <span class="opacity65">万</span>
                </li>
                <li class="v-relative">
                  <span class="v-label opacity65">完成率</span> 
                  <span class="fs26 opacity-lighter" v-if="bVTrend.CompletedRatio === -1">--</span>
                  <span class="fs26 opacity-lighter" v-else>{{ bVTrend.CompletedRatio }}%</span>
                  <Tooltip placement="left" class="v-tips" transfer>
                    <ztIcon type="info-circle-o" color="#939393"></ztIcon>
                    <div slot="content">
                      <p style="padding: 6px; line-height: 22px; font-size: 14px;">在手营业额包括已完成的营业额，正在完成的营业额和未来已中标的营业额。</p>
                    </div>
                  </Tooltip>
                </li>
              </ul>
              <div id="turnoverTrend" style="width: 100%; height:300px;"></div>
            </TabPane>
            <TabPane label="历史营业额" name="turnoverOver" class="v-trend">
              <ul class="mt20">
                <li>
                  <span class="v-label opacity65">目标营业额</span> 
                  <!-- <span class="fs26 opacity-lighter">{{ numberComma(completedBV.TargetAmount) }}</span> -->
                  <span class="fs26 opacity-lighter">{{ numberComma(parseInt(completedBV.TargetAmount)) }}</span>
                  <span class="v-float" v-if="String(completedBV.TargetAmount).indexOf('.') !== -1">.{{String(completedBV.TargetAmount).split('.')[1]}}</span>
                  <span class="opacity65">万</span>
                </li>
                <li>
                  <span class="v-label opacity65">实际完成营业额</span> 
                  <span class="fs26 opacity-lighter">{{ numberComma(parseInt(completedBV.CompletedAmount)) }}</span>
                  <span class="v-float" v-if="String(completedBV.CompletedAmount).indexOf('.') !== -1">.{{String(completedBV.CompletedAmount).split('.')[1]}}</span>
                  <span class="opacity65">万</span>
                </li>
                <li class="v-relative">
                  <span class="v-label opacity65">完成率</span> 
                  <span class="fs26 opacity-lighter" v-if="completedBV.CompletedRatio === -1">--</span>
                  <span class="fs26 opacity-lighter" v-else>{{ completedBV.CompletedRatio }}%</span>
                  <!-- <Tooltip placement="left" class="v-tips" transfer>
                    <ztIcon type="info-circle-o" color="#939393"></ztIcon>
                    <div slot="content">
                      <p>tips,文本内容待定</p>
                      <p>tips,文本内容待定</p>
                    </div>
                  </Tooltip> -->
                </li>
              </ul>
              <div id="turnoverOver" style="width: 100%; height:300px;"></div>
            </TabPane>
            
          </Tabs>
        </Col>
        <Col span="6" class="v-top10">
          <h2>
            <b v-if="tabName === 'turnoverOver'">区域营业额排名</b>
            <b v-else>全年在手营业额排名</b>
            <span class="fr">单位：万</span>
          </h2>
          <ul v-if="tabName === 'turnoverOver'">
            <li v-for="(item, index) in completedBV.ByArea" :key="index">
              <span class="v-num fl">{{ index + 1 }}</span>
              <!-- <p class="v-area overflow-1line">{{ item.AreaName }}</p> -->
              <!-- <a target="_blank" @click="ToDetailArea(item.AreaNo)" class="v-area overflow-1line">{{ item.AreaName }}</a> -->
              <Tooltip placement="left" class="fl mr25">
                <a target="_blank" @click="ToDetailArea(item.AreaNo)" class="v-area overflow-1line">{{ item.AreaName }}</a>
                <div slot="content" class="v-tooltips-cnt">
                  <dl>
                    <dd>
                      <span class="v-tips-label"><i class="v-dot v-dot-green"></i>全年目标</span>
                      <span class="v-tips-price">{{ numberComma(item.AnnualTarget.toFixed(2)) }}</span>
                    </dd>
                    <dd>
                      <span class="v-tips-label"><i class="v-dot v-dot-green"></i>在手营业额</span>
                      <span class="v-tips-price">{{ numberComma(item.CompletedAmount.toFixed(2)) }}</span>
                    </dd>
                    <dd>
                      <span class="v-tips-label"><i class="v-dot v-dot-red"></i>差异</span>
                      <span class="v-tips-price">{{ numberComma(item.DiffAmount.toFixed(2)) }}</span>
                    </dd>
                    <dd>
                      <span class="v-tips-label"><i class="v-dot v-dot-orange"></i>完成率</span>
                      <span class="v-tips-price" v-if="item.CompletedRatio === -1">--</span>
                      <span class="v-tips-price" v-else>{{ item.CompletedRatio.toFixed(2) }}%</span>
                    </dd>
                  </dl>
                </div>
              </Tooltip>
              <span class="v-percent v-gray" v-if="item.CompletedRatio === -1">--</span>
              <span class="v-percent v-gray" v-else>{{ parseInt(item.CompletedRatio) }}%</span>
              <span class="v-price fr">{{ numberComma(parseInt(item.CompletedAmount)) }}</span>
            </li>
          </ul>
          <ul v-else>
            <li v-for="(item, index) in bVTrend.ByArea" :key="index">
              <span class="v-num fl">{{ index + 1 }}</span>
              <Tooltip placement="left" class="fl mr25">
                <a target="_blank" @click="ToDetailArea(item.AreaNo)" class="v-area overflow-1line">{{ item.AreaName }}</a>
                <div slot="content" class="v-tooltips-cnt">
                  <dl>
                    <dd>
                      <span class="v-tips-label"><i class="v-dot v-dot-green"></i>全年目标</span>
                      <span class="v-tips-price">{{ numberComma(item.AnnualTarget.toFixed(2)) }}</span>
                    </dd>
                    <dd>
                      <span class="v-tips-label"><i class="v-dot v-dot-green"></i>在手营业额</span>
                      <span class="v-tips-price">{{ numberComma(item.CompletedAmount.toFixed(2)) }}</span>
                    </dd>
                    <dd>
                      <span class="v-tips-label"><i class="v-dot v-dot-red"></i>差异</span>
                      <span class="v-tips-price">{{ numberComma(item.DiffAmount.toFixed(2)) }}</span>
                    </dd>
                    <dd>
                      <span class="v-tips-label"><i class="v-dot v-dot-orange"></i>完成率</span>
                      <span class="v-tips-price" v-if="item.CompletedRatio === -1">--</span>
                      <span class="v-tips-price" v-else>{{ item.CompletedRatio.toFixed(2) }}%</span>
                    </dd>
                  </dl>
                </div>
              </Tooltip>
              <span class="v-percent v-gray" v-if="item.CompletedRatio === -1">--</span>
              <span class="v-percent v-gray" v-else>{{ parseInt(item.CompletedRatio) }}%</span>
              <span class="v-price fr">{{ numberComma(parseInt(item.CompletedAmount)) }}</span>
            </li>
          </ul>
        </Col> 
      </Row>
    </div>

    <div class="v-turnover-2-2 mt25 mb40">
      <Row :gutter="25">
        <Col span="11">
          <!-- 区域营业额占比 -->
          <Card bordered="false" dis-hover shadow class="v-turnoverArea v-relative">
            <div slot="title">
              <p>区域营业额占比</p>
              <ButtonGroup size="default" class="mt10">
                <Button type="ghost" @click="GetAreaCompare(0)" :class="{'v-cur': areaCurIndex === 0}">今年</Button>
                <Button type="ghost" @click="GetAreaCompare(1)" :class="{'v-cur': areaCurIndex === 1}">去年</Button>
                <Button type="ghost" @click="GetAreaCompare(2)" :class="{'v-cur': areaCurIndex === 2}">最近十二个月</Button>
              </ButtonGroup>
            </div>
           <!--  <div slot="extra">
              <ButtonGroup size="default">
                <Button type="ghost" @click="GetAreaCompare(0)" :class="{'v-cur': areaCurIndex === 0}">今年</Button>
                <Button type="ghost" @click="GetAreaCompare(1)" :class="{'v-cur': areaCurIndex === 1}">去年</Button>
                <Button type="ghost" @click="GetAreaCompare(2)" :class="{'v-cur': areaCurIndex === 2}">最近十二个月</Button>
              </ButtonGroup>
              <DatePicker placeholder="更多" type="year" style="width: 68px;"
                v-model="completedBVYear" 
                :options="dateOptionsCom"  
                @on-change="GetAreaCompare(3, $event)">
              </DatePicker>
            </div> -->
            <div id="turnoverArea" style="width: 100%; height:372px;"></div>
            <div class="v-title">
              <p class="v-gray">营业额</p>
              <h2>¥ {{ numberComma(areaCompareAmount) }} <span class="fs14 v-gray">万</span></h2>
            </div>
          </Card>

          <!-- 计划对比情况 -->
          <Card bordered="false" dis-hover shadow class="mt25 v-plan-com">
            <div slot="title">
              <p>计划对比情况</p>
            </div>
            <ul class="v-dec mt15">
              <li>
                <p class="opacity65">原计划完成营业额</p>
                <span class="fs24 opacity-lighter">{{ numberComma(parseInt(planCompare.PlanAmount)) }}</span><span class="v-float" v-if="String(planCompare.PlanAmount).indexOf('.') !== -1">.{{String(planCompare.PlanAmount).split('.')[1]}}</span>
                <span class="opacity65">万</span>
              </li>
              <li>
                <p class="opacity65">实际完成营业额</p> 
                <span class="fs24 opacity-lighter">{{ numberComma(parseInt(planCompare.RealAmount)) }}</span><span class="v-float" v-if="String(planCompare.RealAmount).indexOf('.') !== -1">.{{String(planCompare.RealAmount).split('.')[1]}}</span>
                <span class="opacity65">万</span>
              </li>
              <li class="v-relative">
                <p class="opacity65">后期压力</p> 
                <span class="fs24 opacity-lighter">{{ planCompare.PressureRatio }}%</span>
                <Tooltip placement="left" class="v-tips" transfer>
                  <ztIcon type="info-circle-o" color="#939393"></ztIcon>
                  <div slot="content">
                    <div style="padding: 6px 0; line-height: 22px; font-size: 14px;">
                      <p class="fl" style="width: 78px; line-height: 46px;">后期压力 = </p>
                      <div class="fl ta-c">
                        <p style="border-bottom: 1px solid #fff;">原计划完成营业额 - 实际完成营业额</p>
                        <p v-if="curMonth === 12"> 12月的原计划完成营业额</p>
                        <p v-else> {{ curMonth }}月 ~ 12月的原计划完成营业额</p>
                      </div>
                    </div>
                  </div>
                </Tooltip>
              </li>
            </ul>
            <div id="turnoverPlanCom" style="width: 100%; height:310px;"></div>
          </Card>

          <!-- 流程进度 -->
          <Card bordered="false" dis-hover shadow class="mt25">
            <div slot="title">
              <p>流程进度</p>
            </div>
            <div class="v-flow">
              <p class="v-line"></p>
              <Poptip trigger="hover" placement="top" v-for="(item, index) in workflowInfo" :key="item.NodeNo">
                <div class="v-flow-cnt">
                  <span class="v-dot"></span>
                  <p class="v-flow-name">{{ item.NodeName }}</p>
                  <p class="opacity65">{{ item.Ratio }}%</p>
                </div>
                <div slot="content" class="p5">
                  <p>流程： {{ item.Number }}条</p>
                  <p class="opacity65 mt5">耗时：{{ toHourMinute(item.TotalTime) }}</p>
                </div>
              </Poptip>
            </div>
          </Card>

          <!-- 进行中的项目 -->
          <Card bordered="false" dis-hover shadow class="mt25 v-project-card">
            <div slot="title">
              <p>进行中的项目</p>
            </div>
            <a slot="extra" target="_blank" @click="ToDetail(0)">全部项目</a>
            <dl class="v-project" v-for="(item, index) in projectInfo" :key="index">
              <dt>
                <img v-if="index === 0 || index === 1" src="../assets/images/icon1.jpg" width="24" height="24" alt="">
                <img v-if="index === 2" src="../assets/images/icon2.jpg" width="24" height="24" alt="">
                <img v-if="index === 3" src="../assets/images/icon3.jpg" width="24" height="24" alt="">
                <b>{{ item.Status | projectName }}</b>
                <a target="_blank" class="fr" @click="ToDetail(index + 1)">查看详情</a>
              </dt>
              <dd>
                <Row class="mt15">
                  <Col span="12" class="opacity65">项目数：</Col>
                  <Col span="12" class="ta-r">{{ item.ProjectQty }}</Col>
                </Row>
                <Row class="mt8">
                  <Col span="12" class="opacity65">无营业额项目：</Col>
                  <Col span="12" class="ta-r">{{ item.ProjectNotQty }}</Col>
                </Row>
                <Row class="mt8">
                  <Col span="12" class="opacity65">本月总金额：</Col>
                  <Col span="12" class="ta-r">¥{{ numberComma(item.TotalAmount) }}<span class="opacity65">万</span></Col>
                </Row>
              </dd>
            </dl>
          </Card>
        </Col>

        <Col span="13">
          <div class="v-area-wrap ivu-card-shadow mb15" v-for="(item, index) in areaDetailData" :key="index">
            <div class="v-title">
              <b class="fs14 overflow-1line">{{ item.AreaName }}</b><span v-if="item.Estimate" class="v-tag">暂估</span>
              <span class="opacity65 fr mr15">单位：万</span>
            </div>
            <Row class="mt5" :gutter="25">
              <Col span="9" class="v-area-cell">
                <p class="mt8 fs14"><span class="opacity65">完成营业额总计：</span><span class="fr">¥ {{ numberComma(parseInt(item.TotalAmount)) }}</span></p>
                <p class="mt8 fs14"><span class="opacity65">累计与计划差异：</span>
                  <!-- <span class="fr v-red">¥ {{ numberComma(item.DiffAmount) }}</span> -->
                  <span :class="{fr: true, 'v-red': item.DiffAmount < 0}">¥ {{ numberComma(parseInt(item.DiffAmount)) }}</span>
                </p>
                <p class="mt8 fs14"><span class="opacity65">下月计划：</span><span class="fr">¥ {{ numberComma(parseInt(item.NextPlan)) }}</span></p>
              </Col>
              <Col span="8">
                <div :id="'turnoverAreaCell' + index" style="width:100%; height:80px;"></div>
              </Col>
              <Col span="7">
                <div :id="'turnoverAreaCellStack' + index" style="width:100%; height:80px;"></div>
              </Col>
            </Row>
          </div>

        </Col>
      </Row>
    </div>


  </div>
</template>

<script>
  // 引入 ECharts 主模块
  let echarts = require('echarts/lib/echarts')
  // 引入折线图组件
  require('echarts/lib/chart/line')
  // 引入柱状图
  require('echarts/lib/chart/bar')
  // 引入饼图
  require('echarts/lib/chart/pie')
  // 引入提示框和图例组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/legend')

  export default {
    name: 'v-tournover',
    components: {
    },
    data () {
      return {
        preMonthSummary: {  // 上月营业额
          Amount: 0,
          MonthComparison: 0,
          MonthlyRingRatio: 0,
          DailyAverage: 0,
          Estimate: false
        },
        currentMonthPlan: {  // 本月计划
          Amount: 0,
          Ratio: 0,
          Estimate: false
        },
        annualSummary: {  // 全年累计
          Amount: 0,
          YearRingRatio: 0,
          PerCapita: 0,
          Estimate: false
        },
        annualTargetCompleted: {  // 全年累计营业额指标完成率
          CompletedRatio: 0,
          PlanAmount: 0,
          TargetAmount: 0,
          CompletedAmount: 0,
          DiffAmount: 0,
          Estimate: false
        },
        currentMonthPlanX: [],
        currentMonthPlanY: [],
        completedBV: {  // 完成营业额
          TargetAmount: 0,
          CompletedAmount: 0,
          CompletedRatio: 0
        },
        bVTrend: {  // 营业额趋势
          AnnualTarget: 0,
          CompletedAmount: 0,
          CompletedRatio: 0
        },
        completedBVYear: null,
        BVTrendYear: null,
        tabName: 'turnoverTrend',  // tab展开项名称
        yearCurIndex: -1,
        dateOptionsCom: {
          disabledDate (date) {
            return date && date.valueOf() > Date.now()
          }
        },
        dateOptionsTrend: {
          disabledDate (date) {
            return date && date.valueOf() < Date.now() - 86400000 * 30 * 12
          }
        },
        areaCompare: [],  // 区域营业额占比
        areaCurIndex: -1,
        areaCompareAmount: '',  // 区域营业额占比总额
        planCompare: {},  // 计划对比情况
        workflowInfo: [],  // 流程进度
        projectInfo: [],  // 进行中的项目
        areaDetailData: [],  // 区域营业额数据
        yearParams: '',
        curMonth: new Date().getMonth() + 1
      }
    },
    props: {
    },
    filters: {
      projectName: function (value) {
        switch (value) {
          case 1:
            return '施工中'
          case 2:
            return '施工完成'
          case 3:
            return '甲方验收'
          case 4:
            return '样板房'
          default:
            return ''
        }
      }
    },
    computed: {
    },
    watch: {
    },
    created () {
      this.GetPreMonthSummary()  // 获取上月营业额
      this.GetCurrentMonthPlan()  // 获取本月计划
      this.GetAnnualSummary()  // 获取全年累计
      this.GetAnnualTargetCompleted()  // 全年累计营业额指标完成率
      this.OnclickTab('turnoverTrend')  // 完成营业额
      this.GetAreaCompare(0)
      this.GetPlanCompare()  // 计划对比情况
      this.GetWorkflowInfo()  // 流程进度
      this.GetProjectInfo()  // 进行中的项目
      this.GetAreaDetailData()  // 区域营业额数据
    },
    mounted () {
    },
    methods: {
      /**
       * [GetPreMonthSummary 获取上月营业额]
       */
      GetPreMonthSummary () {
        this.$store.dispatch('GetPreMonthSummary').then((res) => {
          if (res.Result) {
            this.preMonthSummary = res.Data
          }
        })
      },
      /**
       * [GetCurrentMonthPlan 获取本月计划]
       */
      GetCurrentMonthPlan () {
        this.$store.dispatch('GetCurrentMonthPlan').then((res) => {
          if (res.Result) {
            this.currentMonthPlan = res.Data
            let xAxis = []
            let yAxis = []
            res.Data.Details.map((item) => {
              xAxis.push(item.AreaName)
              yAxis.push(item.Amount)
            })
            this.currentMonthPlanX = xAxis
            this.currentMonthPlanY = yAxis
            this.$nextTick(() => {
              // 本月计划营业额
              this.drawChart('turnoverPlan', ['#35a4fd'],
                {top: 15, right: 0, bottom: 0, left: 0},
                {show: false, minInterval: 10, data: this.currentMonthPlanX},
                {show: false},
                [{type: 'bar', barWidth: 15, data: this.currentMonthPlanY}]
              )
            })
          }
        })
      },
      /**
       * [GetAnnualSummary 获取全年累计]
       */
      GetAnnualSummary () {
        this.$store.dispatch('GetAnnualSummary').then((res) => {
          if (res.Result) {
            this.annualSummary = res.Data
          }
        })
      },
      /**
       * [GetAnnualTargetCompleted 全年累计营业额指标完成率]
       */
      GetAnnualTargetCompleted () {
        this.$store.dispatch('GetAnnualTargetCompleted').then((res) => {
          if (res.Result) {
            this.annualTargetCompleted = res.Data
          }
        })
      },
      /**
       * [OnclickTab 完成营业额和营业额趋势切换事件]
       * @param {[type]} name [description]
       */
      OnclickTab (name) {
        this.tabName = name
        if (name === 'turnoverOver') {  // 完成营业额
          this.GetCompletedBV(0)
        } else {
          this.GetBVTrend(0)
        }
      },
      /**
       * [GetCompletedBV 完成营业额]
       * @param {[Number]} type [年份 0|今年 1|去年 2|近十二个月]
       */
      GetCompletedBV (type, yearSelect) {
        this.yearCurIndex = type
        let params = {}
        let year = null
        // let date = new Date()
        // let month = new Date().getMonth() + 1
        // month = month < 10 ? '0' + month : month
        // let beginmonth = null
        // let endmonth = null
        if (type === 0) {  // 今年
          // beginmonth = Number(date.getFullYear() + '01')
          // endmonth = Number(date.getFullYear() + '' + month)
          // endmonth = Number(date.getFullYear() + '12')
          this.completedBVYear = null
          year = new Date().getFullYear()
        } else if (type === 1) {  // 去年
          // beginmonth = Number(date.getFullYear() - 1 + '01')
          // endmonth = Number(date.getFullYear() - 1 + '12')
          this.completedBVYear = null
          year = new Date().getFullYear() - 1
        } else if (type === 2) {  // 更多
          // let m = Number(month) + 1
          // m = m < 10 ? '0' + m : m
          // beginmonth = Number(date.getFullYear() - 1 + '' + m)
          // endmonth = Number(date.getFullYear() + '' + month)
          this.completedBVYear = yearSelect
          if (this.completedBVYear !== '') {
            year = yearSelect
          } else {
            this.yearCurIndex = 0
            year = new Date().getFullYear()
          }
        }
        this.yearParams = year
        params = {
          year: year
        }
        this.$store.dispatch('GetCompletedBV', params).then((res) => {
          if (res.Result) {
            // res.Data.ByMonth.sort(function (x, y) {
            //   return (x.Month > y.Month) ? 1 : -1
            // })
            this.completedBV = res.Data
            let xAxisData = []
            let yAxisData = []
            this.completedBV.ByMonth.map((item) => {
              // xAxisData.push(String(item.Month).substring(0, 4) + '-' + String(item.Month).substring(4, 6) + '月')
              xAxisData.push(item.Month + '月')
              yAxisData.push(item.Amount)
            })
            this.$nextTick(() => {
              // 完成营业额
              this.drawChart('turnoverOver', ['#35a4fd'],
                {
                  left: 60,
                  right: 40
                },
                {axisLine: {show: true, lineStyle: {color: '#ccc'}}, boundaryGap: true, axisTick: {show: true, alignWithLabel: true}, data: xAxisData},
                {splitLine: {lineStyle: {type: 'dashed'}}, axisLine: {show: false}, axisTick: {show: false}},
                [{type: 'bar', barWidth: 25, data: yAxisData}]
              )
            })
          }
        })
      },
      /**
       * [GetBVTrend 营业额趋势]
       * @param {[type]} type [description]
       */
      GetBVTrend (type, yearSelect) {
        this.yearCurIndex = type
        let params = {}
        let year = null
        if (type === 0) {  // 今年
          year = new Date().getFullYear()
          this.BVTrendYear = null
        } else if (type === 1) {  // 明年
          year = new Date().getFullYear() + 1
          this.BVTrendYear = null
        } else if (type === 2) {  // 更多
          this.BVTrendYear = yearSelect
          if (this.BVTrendYear !== '') {
            year = yearSelect
          } else {
            this.yearCurIndex = 0
            year = new Date().getFullYear()
          }
        }
        this.yearParams = year
        params = {
          year: year
        }
        this.$store.dispatch('GetBVTrend', params).then((res) => {
          if (res.Result) {
            this.bVTrend = res.Data
            let xAxisData = []
            let yAxisData = []
            this.bVTrend.ByMonth.map((item) => {
              // xAxisData.push(String(item.YearMonth).substring(0, 4) + '-' + String(item.YearMonth).substring(4, 6))
              xAxisData.push(item.Month + '月')
              item.TotalRatio = item.TotalRatio === -1 ? '--' : item.TotalRatio + '%'
              yAxisData.push({
                value: item.Amount,
                TotalAmount: item.TotalAmount,
                TotalRatio: item.TotalRatio,
                YearMonth: item.YearMonth
              })
            })
            this.$nextTick(() => {
              // 营业额趋势
              this.drawChart2('turnoverTrend', ['#35a4fd'],
                {
                  left: 60,
                  right: 40
                },
                {axisLine: {show: true, lineStyle: {color: '#ccc'}}, boundaryGap: true, axisTick: {show: true, alignWithLabel: true}, data: xAxisData},
                {splitLine: {lineStyle: {type: 'dashed'}}, axisLine: {show: false}, axisTick: {show: false}},
                [{type: 'bar', barWidth: 25, data: yAxisData}]
              )
            })
          }
        })
      },
      /**
       * [GetAreaCompare 区域营业额占比]
       */
      GetAreaCompare (type) {
        this.areaCurIndex = type
        let params = {}
        let date = new Date()
        let month = new Date().getMonth() + 1
        month = month < 10 ? '0' + month : month
        let beginmonth = null
        let endmonth = null
        if (type === 0) {  // 今年
          beginmonth = Number(date.getFullYear() + '01')
          // endmonth = Number(date.getFullYear() + '' + month)
          endmonth = Number(date.getFullYear() + '12')
        } else if (type === 1) {  // 去年
          beginmonth = Number(date.getFullYear() - 1 + '01')
          endmonth = Number(date.getFullYear() - 1 + '12')
        } else {  // 近十二个月
          let m = Number(month) + 1
          m = m < 10 ? '0' + m : m
          beginmonth = Number(date.getFullYear() - 1 + '' + m)
          endmonth = Number(date.getFullYear() + '' + month)
        }
        params = {
          BeginMonth: beginmonth,
          EndMonth: endmonth
        }
        this.$store.dispatch('GetAreaCompare', params).then((res) => {
          if (res.Result) {
            this.areaCompare = res.Data
            let all = 0
            this.areaCompare.map((item) => {
              all += item.Amount
            })
            this.areaCompareAmount = all.toFixed(2)
            this.$nextTick(() => {
              // 区域营业额占比
              this.drawChartPie('turnoverArea', res.Data)
            })
          }
        })
      },
      /**
       * [GetPlanCompare 计划对比情况]
       */
      GetPlanCompare () {
        this.$store.dispatch('GetPlanCompare').then((res) => {
          if (res.Result) {
            this.planCompare = res.Data
            let xAxisData = []
            let srcPlanAmount = []  // 原计划营业额收入
            let dstPlanAmount = []  // 现计划营业额收入
            let realAmount = []  // 实际完成营业额收入
            this.planCompare.DetailData.map((item) => {
              xAxisData.push(item.Month)
              srcPlanAmount.push(item.SrcPlanAmount)
              dstPlanAmount.push(item.DstPlanAmount)
              realAmount.push(item.RealAmount)
            })
            this.$nextTick(() => {
              // 计划对比情况
              this.drawChartLine('turnoverPlanCom', xAxisData, srcPlanAmount, dstPlanAmount, realAmount)
            })
          }
        })
      },
      /**
       * [GetWorkflowInfo 流程进度]
       */
      GetWorkflowInfo () {
        this.$store.dispatch('GetWorkflowInfo').then((res) => {
          if (res.Result) {
            res.Data.sort(function (x, y) {
              return (x.NodeNo > y.NodeNo) ? 1 : -1
            })
            this.workflowInfo = res.Data
          }
        })
      },
      /**
       * [GetProjectInfo 进行中的项目]
       */
      GetProjectInfo () {
        this.$store.dispatch('GetProjectInfo').then((res) => {
          if (res.Result) {
            this.projectInfo = res.Data
          }
        })
      },
      /**
       * [GetAreaDetailData 区域营业额数据]
       */
      GetAreaDetailData () {
        this.$store.dispatch('GetAreaDetailData').then((res) => {
          if (res.Result) {
            this.areaDetailData = res.Data
            this.areaDetailData = this.areaDetailData.sort((a, b) => {
              return b.TotalAmount - a.TotalAmount
            })
            this.$nextTick(() => {
              this.areaDetailData.map((item, index) => {
                let idLine = 'turnoverAreaCell' + index
                let xAxis = []
                let seriesA = []
                let seriesB = []
                item.PlanVersusActual.map((subItem) => {
                  xAxis.push(subItem.Month)
                  seriesA.push({
                    value: subItem.RealAmount,
                    other: subItem.RealSum
                  })
                  seriesB.push({
                    value: subItem.PlanAmount,
                    other: subItem.PlanSum
                  })
                })
                // 区域折线图
                this.drawChartLineArea(idLine, xAxis, seriesA, seriesB)

                let idLineArea = 'turnoverAreaCellStack' + index
                let xAxisStack = []
                let seriesAStack = []
                let seriesBStack = []
                item.PlanVersusPlan.map((subItem) => {
                  xAxisStack.push(subItem.Month)
                  seriesAStack.push({
                    value: subItem.SrcPlanAmount,
                    other: subItem.SrcPlanAmountSum
                  })
                  seriesBStack.push({
                    value: subItem.DstPlanAmount,
                    other: subItem.DstPlanAmountSum
                  })
                })
                // 区域折线图
                this.drawChartLineAreaStack(idLineArea, xAxisStack, seriesAStack, seriesBStack)
              })
            })
          }
        })
      },
      /**
       * [drawChart 条形统计图]
       * @param  {[String]} id     [容器id]
       * @param  {[Array]} color  [条形统计图颜色]
       * @param  {[type]} grid   [description]
       * @param  {[type]} xAxis  [description]
       * @param  {[type]} yAxis  [description]
       * @param  {[type]} series [description]
       */
      drawChart (id, color, grid, xAxis, yAxis, series) {
        let _echarts = echarts.init(document.getElementById(id))
        _echarts.setOption({
          color: color,
          grid: grid,
          tooltip: {
            trigger: 'axis',
            padding: [10, 15],
            formatter: '{b0}:<br> {c0} 万'
          },
          textStyle: {
            color: '#000'
          },
          xAxis: xAxis,
          yAxis: yAxis,
          series: series
        })
        // _echarts.on('click', function (params) {
        //   console.log(params)
        //   window.open('/detail/' + params.name)
        // })
      },
      /**
       * [drawChart 条形统计图]
       * @param  {[String]} id     [容器id]
       * @param  {[Array]} color  [条形统计图颜色]
       * @param  {[type]} grid   [description]
       * @param  {[type]} xAxis  [description]
       * @param  {[type]} yAxis  [description]
       * @param  {[type]} series [description]
       */
      drawChart2 (id, color, grid, xAxis, yAxis, series) {
        let _echarts = echarts.init(document.getElementById(id))
        _echarts.setOption({
          color: color,
          grid: grid,
          tooltip: {
            trigger: 'axis',
            padding: [10, 15],
            // formatter: '{b0}:<br/> {c0} 万'
            formatter: (params) => {
              // xAxisData.push(String(item.Month).substring(0, 4) + '-' + String(item.Month).substring(4, 6) + '月')
              // let res = `<p class="v-gray">${params[0].name}</p>`
              let res = ''
              params.map((paramsItem) => {
                res = `<p class="v-gray">${String(paramsItem.data.YearMonth).substring(0, 4)}-${String(paramsItem.data.YearMonth).substring(4, 6)}</p><p class="mt3">${paramsItem.marker} 当月营业额：${this.numberComma(paramsItem.data.value)}万</p><p class="mt3">${paramsItem.marker} 累计营业额：${this.numberComma(paramsItem.data.TotalAmount)}万</p><p class="mt3">${paramsItem.marker} 累计完成率：${this.numberComma(paramsItem.data.TotalRatio)}</p>`
              })
              return res
            }
          },
          textStyle: {
            color: '#000'
          },
          xAxis: xAxis,
          yAxis: yAxis,
          series: series
        })
      },
      /**
       * [drawChartLine 计划对比情况]
       * @param  {[String]} id [容器id]
       */
      drawChartLine (id, xAxis, seriesA, seriesB, seriesC) {
        let _xAxis = []
        xAxis.map((item) => {
          // item = item < 10 ? '0' + item : item
          _xAxis.push(item + '月')
        })
        this.chart = echarts.init(document.getElementById(id)).setOption({
          color: ['#f5a623', '#52c41a', '#0097f5'],
          grid: {
            left: 70,
            right: 15
          },
          tooltip: {
            trigger: 'axis',
            padding: [10, 15],
            formatter: (params) => {
              let year = new Date().getFullYear()
              let res = `<p class="v-gray">${year}-${params[0].name.replace('月', '')}</p>`
              params.map((paramsItem) => {
                res += `<p class="mt3">${paramsItem.marker} <span style="display:inline-block; width: 74px;">${paramsItem.seriesName}：</span><span style="display:inline-block; width: 100px;  text-align:right;">${this.numberComma(paramsItem.data)}万</span></p>`
              })
              return res
            }
          },
          textStyle: {
            color: '#000',
            rich: {
              a: {
                width: 80,
                padding: [0, 10, 0, 0]
              },
              b: {
                width: 80,
                padding: [0, 25, 0, 0],
                color: '#999'
              },
              c: {
                width: 80,
                padding: [0, 25, 0, 0],
                color: '#999'
              }
            }
          },
          xAxis: {
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc'
              }
            },
            boundaryGap: true,
            axisTick: {
              show: true,
              alignWithLabel: true
            },
            type: 'category',
            data: _xAxis
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: '原计划',
              type: 'line',
              // stack: '总量',
              showSymbol: false,
              symbol: 'circle',
              symbolSize: 3,
              data: seriesA
            },
            {
              name: '现计划',
              type: 'line',
              // stack: '总量',
              showSymbol: false,
              symbol: 'circle',
              symbolSize: 3,
              data: seriesB
            },
            {
              name: '实际完成',
              type: 'line',
              // stack: '总量',
              showSymbol: false,
              symbol: 'circle',
              symbolSize: 3,
              data: seriesC
            }
          ]
        })
      },
      drawChartLineArea (id, xAxis, seriesA, seriesB) {
        this.chart = echarts.init(document.getElementById(id)).setOption({
          color: ['#0097f5', '#52c41a'],
          grid: {
            top: 0,
            bottom: 0
          },
          tooltip: {
            trigger: 'axis',
            padding: [10, 15],
            formatter: (params) => {
              let year = new Date().getFullYear()
              let month = parseInt(params[0].name)
              month = month < 10 ? '0' + month : month
              let res = `<p class="v-gray">${year}-${month}</p>`
              params.map((paramsItem) => {
                // res += `<p class="mt3">${paramsItem.marker} ${paramsItem.seriesName}：${this.numberComma(paramsItem.data.value)}（累计 ${this.numberComma(paramsItem.data.other)}）</p>`
                res += `<p class="mt3">${paramsItem.marker} ${paramsItem.seriesName}：<span class="v-a-r w70">${this.numberComma(paramsItem.data.value.toFixed(2))}</span><span class="v-a-r w50">(累计: </span><span class="v-a-r w80">${this.numberComma(paramsItem.data.other.toFixed(2))})</span> </p>`
              })
              return res
            }
          },
          xAxis: {
            show: false,
            type: 'category',
            boundaryGap: false,
            data: xAxis
          },
          yAxis: {
            show: false,
            type: 'value'
          },
          series: [
            {
              name: '实际',
              type: 'line',
              showSymbol: false,
              symbol: 'circle',
              symbolSize: 3,
              data: seriesA
            },
            {
              name: '计划',
              type: 'line',
              showSymbol: false,
              symbol: 'circle',
              symbolSize: 3,
              data: seriesB
            }
          ]
        })
      },
      drawChartLineAreaStack (id, xAxis, seriesA, seriesB) {
        this.chart = echarts.init(document.getElementById(id)).setOption({
          color: ['#f5a623', '#52c41a'],
          grid: {
            top: 10,
            bottom: 10,
            left: 0,
            right: 10
          },
          tooltip: {
            trigger: 'axis',
            padding: [10, 15],
            formatter: (params) => {
              let year = new Date().getFullYear()
              let month = parseInt(params[0].name)
              month = month < 10 ? '0' + month : month
              let res = `<p class="v-gray">${year}-${month}</p>`
              params.map((paramsItem) => {
                // res += `<p class="mt3">${paramsItem.marker} ${paramsItem.seriesName}：${this.numberComma(paramsItem.data.value)}（累计 ${this.numberComma(paramsItem.data.other)}）</p>`
                res += `<p class="mt3">${paramsItem.marker} ${paramsItem.seriesName}：<span class="v-a-r w70">${this.numberComma(paramsItem.data.value.toFixed(2))}</span><span class="v-a-r w50">(累计: </span><span class="v-a-r w80">${this.numberComma(paramsItem.data.other.toFixed(2))})</span> </p>`
              })
              return res
            }
          },
          xAxis: {
            show: false,
            type: 'category',
            boundaryGap: false,
            data: xAxis
          },
          yAxis: {
            show: false,
            type: 'value'
          },
          series: [
            {
              name: '原计划',
              type: 'line',
              smooth: true,
              showSymbol: false,
              symbol: 'circle',
              symbolSize: 3,
              areaStyle: {
                origin: 'start',
                normal: {
                  color: '#fdedd3'
                }
              },
              data: seriesA
            },
            {
              name: '调整后',
              type: 'line',
              smooth: true,
              showSymbol: false,
              symbol: 'circle',
              symbolSize: 3,
              areaStyle: {
                origin: 'start',
                normal: {
                  color: '#e0ebd2'
                }
              },
              data: seriesB
            }
          ]
        })
      },
      /**
       * [drawChartPie 区域营业额占比饼图]
       * @param  {[type]} id   [容器id]
       * @param  {[Array]} data [区域营业额占比数组]
       */
      drawChartPie (id, data) {
        this.chart = echarts.init(document.getElementById(id)).setOption({
          color: ['#3ba0ff', '#36cbcb', '#4ecb74', '#a0d911', '#fadb14', '#fa8c16', '#fa541c', '#f5222d', '#eb2f96', '#722ed1'],
          grid: {
            top: 0,
            left: -100
          },
          tooltip: {
            padding: [10, 15],
            formatter: (params) => {
              return `${params.marker} ${params.data.name}：¥${params.data.value} | ${params.data.ratio}%`
            }
          },
          legend: {
            show: true,
            orient: 'vertical',
            right: 10,
            padding: [30, 10],
            itemGap: 20,
            itemWidth: 8,
            itemHeight: 8,
            data: this.TurnoverAreaDataLegend(data),
            formatter: (name) => {
              let res = data
              let arr = []
              res.map((item) => {
                if (name === item.AreaName) {
                  arr.push(
                    '{a|' + item.AreaName + '}',
                    '{b| |}',
                    '{c|' + parseInt(item.Ratio) + '%}',
                    '{d|¥ ' + this.numberComma(parseInt(item.Amount)) + '}'
                  )
                }
              })
              return arr.join('')
            },
            textStyle: {
              rich: {
                a: {
                  width: 80,
                  padding: [0, 10, 0, 0]
                },
                b: {
                  width: 20,
                  align: 'center',
                  color: '#999'
                },
                c: {
                  width: 30,
                  padding: [0, 25, 0, 0],
                  align: 'right',
                  color: '#999'
                },
                d: {
                  width: 50,
                  align: 'right'
                }
              }
            }
          },
          series: [
            {
              name: '区域营业额占比',
              type: 'pie',
              radius: ['50%', '65%'],
              center: ['26%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 2,
                  borderColor: '#fff'
                }
              },
              data: this.TurnoverAreaData(data)
            }
          ]
        })
      },
      TurnoverAreaData (data) {
        let res = []
        data.map((item, index) => {
          res.push({
            value: item.Amount,
            name: item.AreaName,
            ratio: item.Ratio
          })
          // if (index === 9) {
          //   res.push({
          //     value: item.Amount,
          //     name: item.AreaName,
          //     ratio: item.Ratio,
          //     selected: true
          //   })
          // } else {
          //   res.push({
          //     value: item.Amount,
          //     name: item.AreaName,
          //     ratio: item.Ratio
          //   })
          // }
        })
        return res
      },
      TurnoverAreaDataLegend (data) {
        let res = []
        data.map((item) => {
          res.push({
            name: item.AreaName,
            icon: 'circle'
          })
        })
        return res
      },
      /**
       * [toHourMinute 分钟转换为小时和分钟]
       * @param  {[Number]} minutes [需要转换的分钟数]
       * @return {[String]}         [xx小时xx分钟]
       */
      toHourMinute (minutes) {
        return (Math.floor(minutes / 60) + '小时' + (minutes % 60) + '分钟')
      },
      ToDetail (status) {
        let url = document.domain === 'localhost' ? '#/projectInfoDetail?' : '/ERPOC/Portals/turnover/#/projectInfoDetail?'
        window.open(`${url}status=${status}`)
      },
      ToDetailArea (areaNo) {
        let url = document.domain === 'localhost' ? '#/trendDetail?' : '/ERPOC/Portals/turnover/#/trendDetail?'
        window.open(`${url}areas=${areaNo}&year=${this.yearParams}`)
      }
    }
  }
</script>

<style lang="less">
  @import '../../../assets/style/common.less';
  .ivu-btn:focus,
  .ivu-btn-ghost:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .v-tournover {
    overflow: hidden;
    .v-a-r {
      display: inline-block;
      text-align: right;
    }
    .w50 {
      width: 50px;
    }
    .w70 {
      width: 70px;
    }
    .w80 {
      width: 80px;
    }
    .mt3 {
      margin-top: 3px;
    }
    .mt8 {
      margin-top: 8px;
    }
    .mt25 {
      margin-top: 25px;
    }
    .mr25 {
      margin-right: 25px;
    }
    .v-black {
      color: #000;
    }
    .v-gray {
      opacity: 0.65;
    }
    .v-red {
      color: #f62b36;
    }
    .opacity65 {
      opacity: 0.65;
    }
    .v-relative {
      position: relative;
    }
    .fs26 {
      font-size: 26px;
    }
    .fs24 {
      font-size: 24px;
    }
    .fs14 {
      font-size: 14px;
    }
    .p5 {
      padding: 5px;
    }
    .v-tag {
      display: inline-block;
      width: 43px;
      height: 22px;
      line-height: 22px;
      border-radius: 4px;
      border: 1px solid #ffaca7;
      text-align: center;
      color: #f62b36;
      background-color: #fff1f0;
      font-size: 12px;
    }
    h1 {
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 20px;
      font-weight: normal;
      background-color: #4a90e2;
      color: #fff;
    }
    .v-tournover-wrap {
      width: 1326px;
      margin-left: auto;
      margin-right: auto;
    }
    .v-tournover-s-cell {
      height: 188px;
      color: #000;
      .ivu-card-body {
        padding: 20px 24px 0;
      }
      .v-title {
        font-size: 14px;
        opacity: 0.45;
      }
      .v-price {
        font-size: 30px;
        opacity: 0.85;
      }
      .v-price .v-float {
        font-size: 20px;
      }
      .v-price span:last-child {
        color: #8e8e8e;
        font-size: 12px;
        margin-left: 5px;
        opacity: 1;
      }
      .v-ratio {
        height: 41px;
        border-bottom: 1px solid #e8e8e8;
      }
      .v-ratio li {
        list-style: none;
        display: inline-block;
      }
      .v-sum span {
        display: inline-block;
      }
      .v-sum span.v-tag {
        margin-top: 9px;
      }
      .v-progress {
        height: 18px;
        position: relative;
      }
      .v-all {
        position: absolute;
        top: 5px;
        width: 100%;
        height: 10px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        background-color: #f0f2f5;
      }
      .v-plan {
        position: absolute;
        top: 1px;
        height: 18px;
        border-right: 2px solid #13c2c2;
        background-color: transparent;
      }
      .v-actual {
        position: absolute;
        top: 6px;
        height: 8px;
        background-color: #13c2c2;
      }
    }
    .v-turnover-3-1 {
      width: 1326px;
      border-radius: 2px;
      padding: 20px 24px;
      margin-left: auto;
      margin-right: auto;
      background-color: #fff;
      .v-float {
        font-size: 18px;
      }
      .ivu-tabs-nav .ivu-tabs-tab {
        padding: 8px;
        font-weight: bold;
        font-size: 15px;
      }
      .v-year-tab {
        position: absolute;
        top: 8px;
        right: 20px;
        z-index: 999;
      }
      .v-year-tab li {
        cursor: pointer;
        display: inline-block;
        margin: 0 15px;
        list-style: none;
      }
      .v-year-tab .v-cur {
        color: #4a90e2;
      }
      .v-top10 {
        padding-top: 8px;
        ul {
          margin-top: 20px;
        }
        li {
          list-style: none;
          height: 30px;
          margin: 5px 0;
          overflow-x: hidden;
        }
        .v-num {
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-right: 24px;
          border-radius: 100%;
          line-height: 20px;
          text-align: center;
          background-color: #f0f2f5;
        }
        li:nth-child(-n+3) .v-num {
          color: #fff;
          background-color: #1890ff;
        }
        .v-area {
          display: inline-block;
          width: 90px;
        }
        .v-percent {
          display: inline-block;
          width: 45px;
          text-align: right;
        }
        .v-tooltips-cnt {
          width: 175px;
        }
        .v-tooltips-cnt dd {
          margin: 5px 0;
        }
        .v-tips-label {
          display: inline-block;
          width: 85px;
        }
        .v-tips-price {
          display: inline-block;
          width: 65px;
          margin-right: 10px;
          text-align: right;
        }
        .v-dot {
          display: inline-block;
          width: 6px;
          height: 6px;
          margin-right: 10px;
          border-radius: 100%;
        }
        .v-dot-green {
          background-color: #2fc25b;
        }
        .v-dot-red {
          background-color: #d0021b;
        }
        .v-dot-orange {
          background-color: #f5a623;
        }
      }
      .v-top10 h2 {
        font-size: 15px;
      }
      .v-top10 h2 span {
        margin-top: 3px;
        font-size: 12px;
        opacity: 0.65;
        font-weight: normal;
      }
      .v-trend {
        color: #000;
        li {
          width: 33%;
          height: 47px;
          margin-top: 5px;
          display: inline-block;
          border-left: 1px solid #e8e8e8;
          text-align: center;
        }
        li:first-child {
          border-left: none;
        }
        li span:first-child {
          font-size: 14px;
          display: inline-block;
          width: 100px;
        }
        .v-tips {
          position: absolute;
          top: 3px;
          right: 30px;
        }
      }
    }
    .v-turnover-2-2 {
      width: 1326px;
      margin-left: auto;
      margin-right: auto;
      color: #000;
      .v-dec {
        margin-left: -5px;
        margin-right: -5px;
      }
      .v-plan-com {
        li {
          width: 190px;
          padding: 0 20px;
          height: 50px;
          display: inline-block;
          border-right: 1px solid #e8e8e8;
        }
        li:last-child {
          width: 150px;
          border-right: none;
        }
        li p {
          position: relative;
          top: -3px;
        }
        .v-float {
          font-size: 18px;
        }
        .v-tips {
          position: absolute;
          top: 23px;
          right: 0px;
        }
      }
      .v-flow {
        height: 67px;
        position: relative;
        margin: 40px 0;
        .v-line {
          position: absolute;
          top: 7px;
          left: 70px;
          width: 412px;
          height: 2px;
          background-color: #1890ff; 
        }
        .v-flow-cnt {
          width: 136px;
          text-align: center;
        }
        .v-flow-cnt:hover .v-dot {
          transform: scale(1.2, 1.2);
          border-width: 2px;
        }
        .v-flow-cnt:hover .v-flow-name {
          font-weight: bold;
        }
        .v-dot {
          display: inline-block;
          width: 14px;
          height: 14px;
          border-radius: 100%;
          border: 3px solid #fff;
          background-color: #1890ff;
          transition: all .6s;
        }
        .v-flow-name {
          font-size: 15px;
          transition: all .6s;
        }
      }
      .v-project {
        display: inline-block;
        width: 297px;
        height: 156px;
        padding: 20px 24px;
        border-top: 1px solid #e9e9e9;
        border-left: 1px solid #e9e9e9;
        dt {
          height: 24px;
          line-height: 24px;
          img {
            float: left;
            margin-right: 10px;
          }
        }
      }
      .v-project:nth-child(odd) {
        border-left: none;
      }
      .v-project:nth-child(-n+2) {
        border-top: none;
      }
      .v-project-card .ivu-card-body {
        padding: 0;
      }
      .v-turnoverArea .v-title {
        position: absolute;
        top: 264px;
        left: 80px;
        width: 165px;
        text-align: center;
        h2 {
          font-weight: normal;
          font-size: 22px;
          margin-top: 5px;
        }
      }
      .v-turnoverArea .v-cur {
        border-color: #57a3f3;
        z-index: 9;
      }
      // .v-turnoverArea .ivu-card-head {
      //   padding: 20px 16px;
      // }
    }
    .v-area-wrap {
      padding: 20px 20px 14px 20px;
      border-radius: 2px;
      background-color: #fff;
      .v-title {
        height: 23px;
      }
      .v-title b {
        float: left;
        width: 100px;
        margin-right: 20px;
      }
    }
  }
</style>
